import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

class SegmentedButtonPage extends PageWithTitle {
  const SegmentedButtonPage({super.key}) : super("分段按钮(SegmentedButton)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("Flutter对多个按钮排列形成的按钮组也有一些封装好的高级组件可以直接使用，鉴于以"
          "下原因，本章内容只介绍分段按钮的使用"),
      PrimaryHeaderLabelText(
          "ToggleButtons",
          "切换按钮，提供一个按钮组，提供类似radio组件的单选行为，这个组件来自Material2，目前"
              "已经过时，推荐使用分段按钮"),
      PrimaryHeaderLabelText(
          "SegmentedButton",
          "分段按钮，Material3设计风格，提供与前端ui库element plus类似的样式，对比"
              "ToggleButtons它的边框样式很容易让人知晓他是同一组按钮，一般用于类似Tabs组件"
              "实现分页导航功能"),
      PrimaryHeaderLabelText(
          "Button groups",
          "按钮组，Material3的最新设计，目前Flutter并未实现，它包含标准和连接两种样式，后者"
              "用于替代分段按钮"),
      PrimaryHeaderLabelText(
          "Split buttons",
          "拆分按钮，Material3的最新设计，目前Flutter并未实现，它适用于按钮携带附加操作的使"
              "用场景，比如表格的表头需要有排序功能可以是这种分段样式（   表名   |↑↓）"),
      AppSpacer.large,
      _SegmentedButtonExample(),
      UlItem("SegmentedButton"),
      BodyText("分段按钮，在样式上很像一个按钮分成多段，支持单选与多选模式，体现出多个按钮是同"
          "一组的设计语言"),
      LabelText("在Material主题中配置分段按钮样式segmentedButtonTheme"),
      PrimaryHeaderLabelText("multiSelectionEnabled", "启用多选，默认不启用"),
      PrimaryHeaderLabelText("emptySelectionAllowed", "允许不选择选项，默认不启用"),
      PrimaryHeaderLabelText(
          "showSelectedIcon", "显示选中图标，在选中状态会替换图标内的icon，默认启用"),
      PrimaryHeaderLabelText("selectedIcon", "设置选中图标，默认为✔"),
      PrimaryHeaderLabelText(
        "segments",
        "分段按钮构建",
        "    - icon 按钮图标",
        "    - value 按钮对应的item对象",
        "    - label 按钮文本",
        "    - tooltip 按钮长按小提示",
      ),
      PrimaryHeaderLabelText("selected", "选中的item集合，用于告知组件当前那些按钮选中了"),
      PrimaryHeaderLabelText(
          "onSelectionChanged",
          "分段按钮选中状态改变时回调，分段按钮内部不保存选中状态，这里需要开发者自己保存集合并"
              "重建组件"),
      PrimaryHeaderLabelText(
        "style",
        "关于样式，这里使用ButtonStyle对象，分段按钮可以看出是一个按钮内部分成多段，所以在"
            "按钮样式中，也将一部分属性用于配置整体样式，其余属性配置分段样式",
        "    - side 整体的边框样式(外部边框与分段间隔线)",
        "    - shape 整体的裁剪样式，结合elevation与shadowColor形成特定形状的阴影",
        "    - shadowColor 整体的阴影颜色",
        "    - elevation 整体的悬浮高度",
      ),
    ];
  }
}

class _SegmentedButtonExample extends StatelessWidget {
  const _SegmentedButtonExample();

  @override
  Widget build(BuildContext context) {
    var selectedItems = {0};
    return StatefulBuilder(builder: (context, setState) {
      return SegmentedButton(
        segments: List.generate(3, (index) {
          final name = switch (index) {
            0 => "10 k",
            1 => "10 mp",
            _ => "11 mp",
          };
          return ButtonSegment(
            icon: Icon(switch (index) {
              0 => Icons.ten_k,
              1 => Icons.ten_mp,
              _ => Icons.eleven_mp,
            }),
            value: index,
            label: Text(name),
            tooltip: name,
          );
        }),
        selected: selectedItems,
        multiSelectionEnabled: true,
        emptySelectionAllowed: true,
        showSelectedIcon: true,
        selectedIcon: const Icon(Icons.access_time),
        onSelectionChanged: (selected) {
          setState(() {
            selectedItems = selected;
          });
        },
      );
    });
  }
}
